<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;padding:0;
        }
        .top{
            height:450px;
            width:100%;
            background:#d5dfeb url("images/top.jpg") no-repeat center center;     
            }
            .nav{
                width: 1121px;
                line-height: 20px;
                text-align: center;
                margin-left:auto;
                margin-right:auto;
            }
            .nav a{
                text-decoration: none;
                color: white;
                font-size: 15px;
            }
            .brief{
                padding-top:225px;
                height:200px;
                width:100%;
                text-align: center;
                color:white;
            }
            .brief h1{
                font-size:25px;
            }
            .brief h2{
                font-size:12px;
            }
            .brief h3{
                font-size:12px;
            }
            .container{
                width:1121px;
                height:1000px;
                margin-left: auto;
                margin-right:auto;
            }
            .container-wrap{
                color: #a3a3a2;
                position: relative;
                height:1000px;
            }
            .img{
                overflow: hidden;
                border:1px #dddcd6 solid;
            }
            .img>div{
                float:left;
                height:100%;
            }
            .img-left{
                width:30%;
            }
            .img-right{
                margin-top: 100px;
                width:70%;
            }
            .img-right a{
                line-height: 30px;
                font-size: 12px;
                text-decoration: none;
                color:#333;
            }
            .about{
                line-height: 50px;
                text-align: center;
            }
            .education{
                line-height:50px;
                text-align:center;
            }
            .education-content{
                height:300px;
                width:1121px;
                border:1px #dddcd6 solid; 
            }
            .text{
                height:300px;
                width:1121px;
                border:1px white solid;
                font-size: 12px;
                color:black;
            }
            table{
                height:300px;
                width:1121px;
            }
            .text th{
                line-height:30px;
                width:500px;
                border:1px white solid; 
                text-align: center;
                font-weight: lighter;
            }
            .text td{
                width:600px;
                border:1px white solid; 
                text-align: right;
            }
            .hobby{
                line-height: 50px;
                text-align: center;
            }
            .hobby-content{
                height:300px;
                width:1121px;
                border:1px #dddcd6 solid; 
                text-align: center;
            }
            .hobby-content li{
                display:inline-block;
                height:210px;
                width:360px;
                margin-top:45px;
                margin-bottom:45px;
            }
            .showcase{
                line-height: 50px;
                text-align: center;
            }
            .showcase-content{
                height:500px;
                width:1121px;
                border:1px #dddcd6 solid; 
                text-align: center;
            }
          
            .hobby-content img{
                transition: all 1s;
            }
            .hobby-content img:hover{
                box-shadow: 8px 8px 5px 2px #666666;
                transform: translateX(-20px);
            }
            .showcase-content{
                width: 1121px;
                height:500px;
            }
            .tu-one:after{
                content: "";
                display: table;
                clear: both;
            }
            .tu-two:after{
                content: "";
                display: table;
                clear: both;
            }
            .showcase-content img{
                width: 100px;
                height:100px;
            }
            .tu-one{
                margin-top:80px;
                height:230px;
            }
            .tu-two{
                height:230px;
            }
            .tu-one div{
                float:left;
                width: 25%;
            }
            .tu-two div{
                float:left;
                width:25%;
            }
            a{
                text-decoration:none; 
            }
            h4{
                font-size:12px;
                color: #a3a3a2;
            }
            h5{
                font-size:12px;
            }
            .bottom{
                text-align: center;
                position:relative;
                top:600px;
                bottom:0px;
                height:200px;
                width:100%;
                background:#d5dfeb;
                margin-top:70px;
            }
            .footer{
                width: 1123px;
                margin-left: auto;
                margin-right: auto;
                text-align:center;
                color:white;
            }
            .footer>div{
                margin-top: 20px;
            }
            .footer a{
                text-decoration:none;
                color:#a1afc9;
                font-size:15px;
            }
            .footer .header-title{
                margin-bottom:30px;
            }
            .copyright{
                font-size: 12px;
            }
    </style>
</head>
<body>
    <div class="top">
        <div class="nav">
            <a href="#">首页</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#I">关于我</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#E">教育实践</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#H">兴趣爱好</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#S">作品展示</a>
        </div>
        <div class="brief">
            <h1>王春萌</h1>
            <h2>英文名:Small Meng</h2>
            <h3>职业：大三学生</h3>
        </div>
    </div>
    <div class="container">
        <div class="container-wrap">
            <h3 class="about" id="I">
                About
                <span>Me</span>
                </h3>
                <div class="introduce">
                    <div class="img">
                        <div class="img-left">
                        <img src="images/i.jpg" alt="">
                        </div>
                        <div class="img-right">
                                <a href="#">
                                        我性格热情开朗，待人友好，为人诚实谦虚。工作勤奋，认真负责，能吃苦耐劳，尽职尽责，有耐心。具有亲和力，平易近人，善于与人沟通。
                                        学习刻苦认真，成绩优秀。积极参加课外文体活动，各种社会实践活动和兼职工作等，以增加自己的阅历，提高自己的能力。在工作中体会办事方式，锻炼口才和人际交往能力。
                                        在平时学校生活中，做过很多兼职。例如：家教、电话访问员、酒楼服务员、派传单、问卷调查，还到工厂打过暑期工，亲身体会了各种工作的不同运作程序和处事方法，锻炼成了吃苦耐劳的精神，并从工作中体会到乐趣，尽心尽力。
                                </a>
                        </div>
                    </div>
                </div>
                <h3 class="education" id="E">
                    Education
                </h3>
                <div class="education-content">
                    <div class="text">
                    <table>
                        <tr>
                        <th>
                            <p>小学就读于云南小板桥小学，官渡古镇中心小学</p>
                            <p>初中就读于云南官渡先锋中学</p>
                            <p>高中就读于云南云秀书院</p>
                            <p>大学就读于湖北大学知行学院</p>
                        </th> 
                        <td><img src="images/read.jpg"></td>
                        </tr>
                        </table>
                    </div>
                </div>
                <h3 class="hobby" id="H">
                    Hobby
                </h3>
                <div class="hobby-content">
                    <ul>
                        <li><img src="images/dog.jpg" alt="#"><h5>狗</h5></li>
                        <li><img src="images/sleep.jpg" alt="#"><h5>睡觉</h5></li>
                        <li><img src="images/single.jpg" alt="#"><h5>唱歌</h5></li>
                    </ul>
                </div>
                <h3 class="showcase" id="S">
                    Showcase
                </h3>
                <div class="showcase-content">
                    <div class="tu-one">
                    <div>
                    <a href="showcase/day1/个人网站.html">
                        <img src="showcase/images/1.jpg" alt="">
                        <h4>个人网站</h4>
                    </a>
                    </div>
                    <div>
                    <a href="showcase/day1/诗意生活.html">
                        <img src="showcase/images/2.jpg" alt="">
                        <h4>诗意生活</h4>
                    </a>
                   </div>
                    <div>
                    <a href="showcase/实木地板/index.html">
                        <img src="showcase/images/3.jpg" alt="">
                        <h4>实木地板</h4>
                    </a>
                   </div>
                    <div>
                    <a href="showcase/关于远大/index.html">
                        <img src="showcase/images/4.png" alt="">
                        <h4>关于远大</h4>
                    </a>
                   </div>
                    </div>
                    <div class="tu-two">
                    <div>
                    <a href="showcase/家居医生/index.html">
                        <img src="showcase/images/5.jpg" alt="">
                        <h4>家居医生</h4>
                    </a>
                    </div>
                    <div>
                    <a href="showcase/小米登录页面/index.html">
                        <img src="showcase/images/6.jpg" alt="">
                        <h4>小米登录网页</h4>
                    </a>
                   </div>
                    <div>
                    <a href="showcase/小米网站/index.html">
                        <img src="showcase/images/7.jpg" alt="">
                        <h4>小米网站</h4>
                    </a>
                   </div>
                    <div>
                    <a href="showcase/木兮地板/index.html">
                        <img src="showcase/images/8.jpg" alt="">
                        <h4>木兮地板</h4>
                    </a>
                   </div>
                   </div>
                </div>
    </div>
    </div>
    <div class="bottom">
        <div class="footer">
            <div class="header-title">
                <h1>联系我吧</h1>
            </div>
            <div>
                <span>电话：<a href="#"> 15927366653</a></span>
            </div>
            <div>
                <span>邮箱:<a href="#">2399637604@qq.com</a></span>
            </div>
            <div class="copyright">Copyright ©2018 – 2028 王春萌的个人简介</div>
        </div>
    </div>
</body>
</html>
